<template>
  <div class="c-bg-sgray">
    <my-small-tabbar class="c-bg-white" :tabList="[{title: '已领取',index: 2},{title: '未赠送',index: 0}, {title: '已赠送',index: 1}]" :tabIndex="tabIndex" @changeTab="clickTab"></my-small-tabbar>
    <div class="c-ph24 c-pt24">
      <div class="c-ph24 c-pv24 c-bg-white c-flex-row c-justify-sb c-mb24 c-br12" v-for="(item, index) in courseList" :key="index" @click="goDetail(item)">
        <div class="c-ww180 c-maxh120 c-text-hidden c-flex-shrink0 c-br12 c-p">
          <img v-if="(item.prodType == cfrom.vip || item.prodType == cfrom.svip || item.prodType == cfrom.presentVip || item.prodType == cfrom.presentSvip) && item.vipInfo && item.vipInfo.cover && item.vipInfo.cover.coverUrl" v-lazy="item.vipInfo.cover.coverType == 1 ? require('../../../assets/i/wap/vip/vip-bg-mb' + item.vipInfo.cover.coverUrl + '.png') : item.vipInfo.cover.coverUrl" class="c-w100 c-block c-maxh c-br12" />
          <img v-else-if="(item.prodType == cfrom.vip || item.prodType == cfrom.svip || item.prodType == cfrom.presentVip || item.prodType == cfrom.presentSvip)" v-lazy="(item.prodType == cfrom.vip || item.prodType == cfrom.presentVip) ? require('../../../assets/i/wap/course/vip.png') : require('../../../assets/i/wap/course/svip.png')" class="c-w100 c-block c-maxh c-br12" />
          <img v-else v-lazy="item.avatar ? item.avatar : require('../../../assets/defult270.png')" class="c-w100 c-block c-br12" />
          <div class="c-pa c-p-b0 c-p-r0 c-fc-white c-fs18 c-textAlign-c c-ph8 c-hh26 c-lh26 c-translucent-balck50 c-br-tl12">
            {{(item.prodType == cfrom.presentCourse || item.prodType == cfrom.course) ? '课程' : ((item.prodType == cfrom.presentColumn || item.prodType == cfrom.column) ? '专栏' : (item.prodType == cfrom.presentVip || item.prodType == cfrom.vip ? 'VIP' : (item.prodType == cfrom.presentSvip || item.prodType == cfrom.svip ? 'SVIP' : (item.prodType == cfrom.presentPackage?"套餐" : (item.prodType == cfrom.presentEbooks) ? "电子书" : (item.prodType == cfrom.presentCamp) ? "训练营" : prodMapType[item.prodType]))))}}
          </div>
          <div class="c-pa c-w100 c-flex-column c-justify-sb c-pv24 c-pl10 c-p-l0 c-p-t0 c-pz1" v-if="item.vipInfo && item.vipInfo.cover && item.vipInfo.cover.coverType == 1" :class="item.vipInfo.cover.coverUrl==1 ? 'c-fc-sblown': item.vipInfo.cover.coverUrl==2 ? 'c-fc-blue': item.vipInfo.cover.coverUrl==3 ? 'c-fc-xxblue': 'c-fc-xpink'" style="height: 2.6rem;">
            <span class="c-fs20 c-text-ellipsis1">{{item.vipInfo.name}}</span>
            <span class="c-fs18" v-if="item.vipInfo.duration<0">永久</span>
            <span class="c-fs18" v-else>{{String(item.vipInfo.duration) + (item.vipInfo.durationType == 1 ? '个月' : '天')}}</span>
          </div>
        </div>
        <div class="c-justify-sb c-flex-column c-justify-sb c-ml20 c-flex-grow1 c-w0 c-hh120">
          <div class="c-text-ellipsis1 c-fs26 c-lh40 c-hh40 c-fc-xblack c-mb20 c-flex-row c-aligni-center">
            <span v-if="item.fromTable == 1" class="c-fs18 theme-fc theme-bd1 qqk-tag c-lh32 c-hh32 c-mr10">亲情卡</span>
            <span v-else-if="item.fromType" class="c-fs18 theme-fc theme-bd1 qqk-tag c-lh32 c-hh32 c-mr10">{{item.fromType}}</span>
            {{item.prodName}}
          </div>
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <div class="c-fs20 c-fc-gray" :class="tabIndex == 0 ? '' : 'c-mb20'">{{tabIndex==2?((item.tags & 1048576) == 1048576 ? item.createdAt : item.updatedAt):item.createdAt}}</div>
            <div class="c-ww120 c-hh48 c-lh48 c-fs22 c-fc-white theme-bg c-br24 c-textAlign-c" v-if="tabIndex == 0">赠送</div>
          </div>
          <div v-if="tabIndex==2&&item.nickname" class="c-text-ellipsis1 c-fc-gray c-fs20 ">赠送者：{{item.nickname}}</div>
          <div v-if="tabIndex==1&&item.receiveName" class="c-text-ellipsis1 c-fc-gray c-fs20 ">领取者：{{item.receiveName}}</div>
        </div>
      </div>
    </div>
    <loading-status-tem :noData="courseList.length == 0" :noMoreData="is_page == false && (courseList.length > 0)" :noDataText="'暂无相关记录'" :showLoading="isLoading"></loading-status-tem>
  </div>
</template>


<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue"
import { utilJs } from "@/utils/common.js"
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: "PresentCourseList",
  components: {
    MySmallTabbar,
    loadingStatusTem
  },
  props: [],
  data() {
    return {
      cfrom: global.ckFrom,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      tabIndex: 0,
      is_page: false,
      page: 1,
      limit: 10,
      courseList: [],
      isLoading: false,
      prodMapType: global.prodMapType,
      pathFrom: ""
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.pathFrom = from.path;
    });
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    //获取不同类别的赠送记录
    clickTab(index) {
      this.tabIndex = index;
      this.is_page = false;
      this.page = 1;
      this.courseList = [];
      this.getMore();
    },
    //跳转赠送详情
    goDetail: function (item) {
      if (this.tabIndex == 1 && ((item.tags & 1048576) == 1048576)) {
        this.$routerGo(this, "push", { path: "/homePage/groupPurchase/groupPurchaseMyTicket", query: { orderId: item.fromId } });
      } else if (this.tabIndex == 2) {
        this.goCC(item.prodType, item.courseType, item.prodId)
      } else {
        this.$routerGo(this, "push", { path: "/homePage/course/presentCourse", query: { orderId: item.orderId, fromShare: 1 } });
      }
    },
    //跳转对应详情页
    goCC: function (prodType, courseType, prodId) {
      if (prodType == this.cfrom.presentVip || prodType == this.cfrom.presentSvip) {
        this.$routerGo(this, "push", {
          path: "/member/memberIndex"
        });
      } else {
        let ckFrom = prodType == this.cfrom.presentCourse ? this.cfrom.course : (prodType == this.cfrom.presentColumn ? this.cfrom.column : (prodType == this.cfrom.presentPackage ? this.cfrom.package : ""));
        let query = {
          ckFrom: ckFrom
        }
        goDetails(this, prodType, prodId, query, courseType);
      }
    },
    //获取赠送列表
    getMore() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'orders/orderShare?isShare=' + this.tabIndex + '&page=' + this.page + '&limit=' + this.limit, function (res) {
          if ($this.page == 1) {
            $this.courseList = res.data ? res.data : [];
          } else {
            let list = res.data;
            $this.courseList = $this.courseList.concat(list);
          }
          $this.page = res.data && (res.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? ($this.page + 1) : $this.page;
          $this.is_page = res.data && (res.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page;
          $this.isLoading = false;
        });
      }
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "领赠记录", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("领赠记录", "", shareUrl, "");
    },
    //下拉获取更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getMore();
        }
      });
    },
    initData() {
      this.tabIndex = 2;
      this.is_page = false;
      this.getMore();
    }
  },
  activated() {
    //课程，专栏,vip,svip的赠送
    setDocumentTitle("领赠记录");// eslint-disable-line
    if (utilJs.checkNeedInitData(this.courseList, this.page) || this.pathFrom == '/member/vip/vipBuy') {
      // this.getMore();
      this.initData()
    }
    this.wechatShare();
    this.isLoading = false;
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.is_page = false;
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.qqk-tag {
  border-radius: 0 0.3rem 0.3rem 0.3rem;
  padding-left: 0.15rem;
  padding-right: 0.15rem;
}
.c-mww50 {
  min-width: 1.25rem;
}
</style>
